<template>
	<view class="wrap">
		<xk-header :headerbg="true" :back="true" title="智慧寻车"></xk-header>
		<image src="https://ibms.on-bright.com:8000/wx/dropImg.png" mode="aspectFit" class="dropImg" :style="{top: dorpImgTop+'px', opacity: pullDownOpacity}" :class="{'transition': isBack}"></image>
		<view class="card" :style="{marginTop: top+'px'}" :class="{'transition': isBack}">
			<view class="cell">
				<view class="label">车牌号码：</view>
				<view>{{formData.car_no}}</view>
			</view>
			<view class="cell">
				<view class="label">停车位置：</view>
				<view>{{formData.region_name+formData.ground_code}}</view>
			</view>
			<view class="cell">
				<view class="label">停车时长：</view>
				<view>{{formData.timeSub}}</view>
			</view>
			<view class="drop" @touchstart="dropStart" @touchmove.stop.prevent="dropMoveThrottled" @touchend="dropEnd">
				<view class="line"></view>
				<view class="circle">
					长按下拉去缴费
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { throttle } from '@/common/util.js'
	export default {
		data() {
			return {
				top: 0,
				end: 0,
				startY: 0,
				isBack: false,
				backTimeOut: null,
				formData: {},
				dorpImgTop: -450,
				screenHeight: 0,
				pullDownOpacity: 0,
			};
		},
		onLoad(options) {
			if(options.result){
				this.formData = JSON.parse(options.result)
				this.formData.timeSub = this.formatTime(this.formData.in_time, Date.now())
			}
			uni.getSystemInfo({
			  success: (res) => {
				this.screenHeight = res.windowHeight
			  }
			})
		},
		methods:{
			dropStart(e){
				this.isBack = false
				this.startY = e.changedTouches[0].clientY
			},
			dropMove(e){
				this.top = e.changedTouches[0].clientY - this.startY + this.end
				this.dorpImgTop = -450 + this.top
				const opacity = this.top / (this.screenHeight / 2)
				this.pullDownOpacity = opacity > 1 ? 1 : opacity
				if(this.backTimeOut) clearTimeout(this.backTimeOut)
				this.backTimeOut = setTimeout(() =>{
					this.top = 0
					this.end = 0
					this.isBack = true
					this.dorpImgTop = -450
					this.pullDownOpacity = 0
				},1000)
			},
			dropEnd(e){
				this.end = this.top
				if(this.top > this.screenHeight / 2){
					if(this.formData.car_no){
						uni.showModal({
							title: '小程序跳转',
							content: '是否跳转昂宝智能停车小程序',
							success: (res) => {
								if(res.confirm){
									uni.navigateToMiniProgram({
										appId: 'wx67e5afb93a2666c8',
										path: `/pagesIndex/settlement/orderDetail?carNo=${this.formData.car_no}&parkId=1650015915539988481`,
										extraData: {appid: 'wx67e5afb93a2666c8',type:1,remark:`${this.formData.car_no}昂宝停车缴费`},
										fail: (e) => {
											console.log(e);
										}
									})
								}
							}
						})
					}
					else{
						this.$u.toast('无车牌号信息')
					}
				}
			},
			dropMoveThrottled(e){
				this.$u.throttle(() =>{
					this.dropMove(e)
				}, 50)
			},
			formatTime(startTime, endTime){
				// 将字符串转换为Date对象
				const updateDateTime = new Date(endTime);
				const inDateTime = new Date(startTime);
				
				// 计算时间差(以毫秒为单位)
				const timeDiffMs = updateDateTime - inDateTime;
				
				// 将时间差转换为秒
				const timeDiffSec = Math.floor(timeDiffMs / 1000);
				
				// 计算小时和分钟
				const hours = Math.floor(timeDiffSec / 3600);
				const minutes = Math.floor((timeDiffSec % 3600) / 60);
				
				// 格式化时间
				const formattedTimeDiff = `${hours.toString().padStart(2, '0')}时${minutes.toString().padStart(2, '0')}分`;
				console.log(formattedTimeDiff);
				
				return formattedTimeDiff
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap{
	min-height: 95vh;
	background-color: #F8F8F8;
	padding: 20rpx;
	position: relative;
}
.dropImg{
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
	aspect-ratio: 555 / 810;
	transition: all 0.1s ease;
}
.card{
	position: relative;
	border-radius: 10rpx;
	background-color: white;
	border: 1px solid #F1F1F1;
	padding: 50rpx;
	transition: all 0.1s ease;
	.cell{
		display: flex;
		align-items: center;
		gap: 70rpx;
		font-size: 28rpx;
		.label{
			width: 150rpx;
		}
	}
}
.drop{
	position: absolute;
	right: 24rpx;
	bottom: -220rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.line{
		width: 1px;
		background-color: #DED7D7;
		height: 110rpx;
	}
	.circle{
		width: 110rpx;
		height: 110rpx;
		box-sizing: border-box;
		padding: 14rpx;
		background-color: #0070E5;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: white;
		font-size: 20rpx;
	}
}
.transition{
	transition: all 1s;
}

</style>
